
Vue.component('com-big-search', {
  template: `<div class="big-search">
                <div class="big-search-main">
                  <div class="search-box">
                    <el-input :placeholder="searchPlaceholder" v-model.trim="searchValue" @keyup.native.enter="handleSearch">
                      <el-button slot="append" class="search-primary-btn" icon="el-icon-search" @click="handleSearch"></el-button>
                    </el-input>
                    <el-button type="text" icon="el-icon-refresh" style="margin-left:20px;" @click="handleRest">清空筛选条件</el-button>
                  </div>
                  <div  class="big-search-box">
                    <div class="search-box-title">{{addName}}</div>
                    <div class="search-box-sub">
                      <span v-for="(item,index) in addOption" :key="'s-add'+ index" :class="{'search-active': item === addValue}" @click="handleTop('add', item)">{{item}}</span>
                    </div>
                  </div>
                  <div v-if="cityOption.length" class="big-search-box">
                    <div class="search-box-title">行政区</div>
                    <div class="search-box-sub">
                      <span v-for="(item,index) in cityOption" :key="'s-city'+ index" :class="{'search-active': item === cityValue}" @click="handleTop('city', item)">{{item}}</span>
                    </div>
                  </div>
                  <div v-if="activeType === 'company' && isShow" class="big-search-box">
                    <div class="search-box-title">行业类型</div>
                    <div class="search-box-sub">
                      <span v-for="(item,index) in typeOption" :key="'s-type'+ index" :class="{'search-active': item === typeValue}" @click="handleTop('type', item)">{{item}}</span>
                    </div>
                  </div>
                  <div v-if="activeType === 'company' && isShow" class="big-search-box">
                    <div class="search-box-title">公司人数</div>
                    <div class="search-box-sub">
                      <span v-for="(item,index) in amountOption" :key="'s-amount'+ index" :class="{'search-active': item === amountValue}"  @click="handleTop('amount', item)">{{item}}</span>
                    </div>
                  </div>
                  <div v-if="activeType === 'talent'" class="big-search-box">
                    <div class="search-box-title">支持方式</div>
                    <div class="search-box-sub">
                      <span v-for="(item,index) in supportOption" :key="'s-support'+ index" :class="{'search-active': item === supportValue}" @click="handleTop('support', item)">{{item}}</span>
                    </div>
                  </div>
                  <div v-if="activeType === 'talent'" class="big-search-box">
                    <div class="search-box-title">人才类型</div>
                    <div class="search-box-sub">
                      <span v-for="(item,index) in talentOption" :key="'s-talent'+ index" :class="{'search-active': item === talentValue}" @click="handleTop('talent', item)">{{item}}</span>
                    </div>
                  </div>
                  <div v-if="activeType === 'news'" class="big-search-box">
                    <div class="search-box-title">人才类型</div>
                    <div class="search-box-sub">
                      <span v-for="(item,index) in deptOption" :key="'s-dept'+ index" :class="{'search-active': item === deptValue}" @click="handleTop('dept', item)">{{item}}</span>
                    </div>
                  </div>
                  <div v-if="isShowMore" class="big-search-tips"><span @click="isShow = !isShow">{{isShow ? '收起条件' : '更多条件'}} <i :class="isShow ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i></span></div>
              </div>
              <div v-if="activeType === 'job'" class="job-search-select">
                  <div class="job-item" v-for="(box,index) in jobOption" :key="'j-s-s-'+index">
                    <el-dropdown trigger="click" @command="jobSelect($event,box)">
                        <span class="el-dropdown-link">
                          {{box.title}} - {{box.selectValue}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item v-for="(item,j) in box.child" :key="'j-s-i-' + index + j" :command="item" :class="{'job-select': item === box.selectValue}">{{item}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
            </div>
            `,
  props: {
    activeType: {
      type: String,
      default: () => {
        return 'company'
      }
    },
    isShowMore: {
      type: Boolean,
      default: () => {
        return true
      }
    },
  },
  data() {
    return {
      searchValue: '',
      isShow: true,
      addValue: '不限',
      addOption: [
        '不限',
        '长沙',
        '株洲',
        '湘潭',
        '岳阳',
        '常德',
        '张家界',
        '益阳',
        '娄底',
        '邵阳',
        '衡阳',
        '郴州',
        '永州',
        '湘西',
        '怀化'
      ],
      cityValue: '不限',
      // cityOption: [],
      typeValue: '不限',
      typeOption: [
        '不限',
        '计算机/互联网/通信/电子',
        '建筑/房地产/物业管理',
        '金融业',
        '制造业',
        '制药/医疗',
        '教育培训科研',
        '广告/传媒/文化/体育',
        '汽车',
        '批发/零售/贸易',
        '专业服务',
        '生活服务',
        '交通运输/仓储/物流',
        '能源/环保/矿产',
        '政府/非盈利机构',
        '农/林/牧/渔'
      ],
      amountValue: '不限',
      amountOption: [
        '不限',
        '20人以下',
        '21-50人',
        '51-100人',
        '101-150人',
        '151-300人',
        '301-500人',
        '501-1000人',
        '1001-3000人',
        '3001-5000人',
        '5001人以上'
      ],
      jobOption: [
        {
          title: '工作经验',
          selectValue: '不限',
          child: ['不限', '应届毕业生', '1年','2年','3至5年','5年以上']
        },
        {
          title: '学历要求',
          selectValue: '不限',
          child: ['不限', '高中（职高/技校）', '中专','大专','大学本科','硕士研究生','博士研究生','博士后']
        },
        {
          title: '薪资要求',
          selectValue: '不限',
          child: ['不限', '0-3K', '3-8K','8-15K','15K-20K','20K以上','面议']
        },
        {
          title: '公司性质',
          selectValue: '不限',
          child: ['不限', '政府机关', '事业单位','国有企业', '民营企业', '私营企业','联营企业','有限责任公司','股份制企业', '其它经济形式']
        },
        {
          title: '公司规模',
          selectValue: '不限',
          child: ['不限', '20人以下', '21-50人','50-200人', '200-500人', '500-2000人','2000人以上']
        }
      ],
      supportValue: '不限',
      supportOption: [
        '不限',
        '资金支持',
        '服务保障',
        '政策扶持',
        '其他'
      ],
      talentValue: '不限',
      talentOption: [
        '不限',
        '备战人才',
        '青年人才',
        '卓越工程师',
        '大国工匠'
      ],
      deptValue: '不限',
      deptOption: [
        '不限',
        '国资国企',
        '党政机关',
        '事业单位',
        '社会团体'
      ]
    }
  },
  computed: {
    addName() {
      if (this.activeType === 'job') return '工作地点'
      if (this.activeType === 'talent' || this.activeType === 'news') return '政策区域' 
      return '所在地点'
    },
    searchPlaceholder() {
      if (this.activeType === 'talent' || this.activeType === 'news') return '请输入关键词' 
      return '搜索职位,公司'
    },
    // 行政区
    cityOption() {
      if (this.addValue.includes('长沙')) {
        return ['不限', '岳麓区', '芙蓉区', '天心区', '雨花区', '开福区', '望城区', '浏阳市', '长沙县', '开发区']
      }
      if (this.addValue.includes('株洲')) {
        return ['不限', '市辖区', '荷塘区', '芦淞区', '石峰区', '醴陵市', '株洲县', '攸县', '茶陵县', '炎陵县', '天元区']
      }
      if (this.addValue.includes('湘潭')) {
        return ['不限', '市辖区', '雨湖区', '韶山市', '湘潭县', '湘乡市', '岳塘区']
      }
      if (this.addValue.includes('衡阳')) {
        return ['不限', '市辖区', '珠晖区', '雁峰区', '石鼓区', '蒸湘区', '南岳区', '常宁市', '衡南县', '衡山县', '衡东县', '祁东县', '耒阳市', '衡阳县']
      }
      if (this.addValue.includes('邵阳')) {
        return ['不限', '市辖区', '双清区', '大祥区', '北塔区', '邵东市', '新邵县', '武冈市', '隆回县', '洞口县', '绥宁县', '新宁县', '城步苗族自治县', '邵阳县']
      }
      if (this.addValue.includes('岳阳')) {
        return ['不限', '市辖区', '岳阳楼区', '云溪区', '君山区', '临湘市', '华容县', '湘阴县', '平江县', '汨罗市', '岳阳县']
      }
      if (this.addValue.includes('常德')) {
        return ['不限', '市辖区', '武陵区', '鼎城区', '安乡县', '津市市', '澧县', '临澧县', '桃源县', '石门县', '汉寿县']
      }
      if (this.addValue.includes('张家界')) {
        return ['不限', '市辖区', '永定区', '桑植县', '慈利县', '武陵源区']
      }
      if (this.addValue.includes('益阳')) {
        return ['不限', '市辖区', '资阳区', '赫山区', '沅江市', '桃江县', '安化县', '南县']
      }
      if (this.addValue.includes('郴州')) {
        return ['不限', '市辖区', '北湖区', '苏仙区', '桂阳县', '宜章县', '资兴市', '嘉禾县', '临武县', '汝城县', '桂东县', '安仁县', '永兴县']
      }
      if (this.addValue.includes('永州')) {
        return ['不限', '市辖区', '零陵区', '冷水滩区', '祁阳县', '东安县', '江华瑶族自治县', '道县', '江永县', '宁远县', '蓝山县', '新田县', '双牌县']
      }
      if (this.addValue.includes('怀化')) {
        return ['不限', '市辖区', '鹤城区', '中方县', '沅陵县', '辰溪县', '溆浦县', '洪江市', '麻阳苗族自治县', '新晃侗族自治县', '芷江侗族自治县', '靖州苗族侗族自治县', '通道侗族自治县', '会同县']
      }
      if (this.addValue.includes('娄底')) {
        return ['不限', '娄星区', '涟源市', '新化县', '冷水江市', '双峰县']
      }
      if (this.addValue.includes('湘西')) {
        return ['不限', '吉首市', '泸溪县', '凤凰县', '龙山县', '保靖县', '古丈县', '永顺县', '花垣县']
      }
      return []
    }
  },
  created() {
    // 人才政策插入本省级
    if (this.activeType === 'talent' || this.activeType === 'news') this.addOption.splice(1, 0, '本省级')
  },
  methods: {
    handleSearch() {
      // 国企单位
      if (this.activeType === 'company') {
        const queryParams = {
          searchValue: this.searchValue,
          addValue: this.addValue,
          cityValue: this.cityValue,
          typeValue: this.typeValue,
          amountValue: this.amountValue
        }
        this.$emit('search', queryParams)
      }
      // 在职招聘
      if (this.activeType === 'job') {
        const queryParams = {
          searchValue: this.searchValue,
          addValue: this.addValue,
          cityValue: this.cityValue,
          workExValue: this.jobOption[0]['selectValue'],
          eduExValue: this.jobOption[1]['selectValue'],
          salaryExValue: this.jobOption[2]['selectValue'],
          comExValue: this.jobOption[3]['selectValue'],
          comScaleValue: this.jobOption[4]['selectValue']
        }
        this.$emit('search', queryParams)
      }
      // 人才政策
      if (this.activeType === 'talent') {
        const queryParams = {
          searchValue: this.searchValue,
          addValue: this.addValue,
          cityValue: this.addValue === '长沙' ? this.cityValue : '',
          supportValue: this.supportValue,
          talentValue: this.talentValue
        }
        this.$emit('search', queryParams)
      }
      // 招考资讯
      if (this.activeType === 'news') {
        const queryParams = {
          searchValue: this.searchValue,
          addValue: this.addValue,
          cityValue: this.addValue === '长沙' ? this.cityValue : '',
          deptValue: this.deptValue
        }
        this.$emit('search', queryParams)
      }
    },
    handleTop(type, item) {
      switch (type) {
        case 'add':
          this.addValue = item
          this.cityValue = '不限'
          break;
        case 'city':
          this.cityValue = item
          break;
        case 'type':
          this.typeValue = item
          break;
        case 'support':
          this.supportValue = item
          break;
        case 'amount':
          this.amountValue = item
          break;
        case 'talent':
          this.talentValue = item
          break;
        case 'dept':
          this.deptValue = item
          break;
      }
      this.handleSearch()
    },
    jobSelect(item, box) {
      box.selectValue = item
      this.handleSearch()
    },
    handleRest() {
      Object.assign(this.$data, this.$options.data())
      this.handleSearch()
    }
  }
});